<template>
	<view class="wrapper" :style="{padding:`calc(80rpx + ${safeTop}px) 0 180rpx`}">
		<div class="header posf bfff space-between" :style="{padding: `calc(10rpx + ${safeTop}px) 251rpx 30rpx 38rpx`}">
			<u-icon name="arrow-left" color="#231815" size="28" class="back-icon" @click="back(1)"></u-icon>
			<image src="../../static/shouye/share.png" mode="widthFix" class="share-icon " @click="goshare"></image>
		</div>
		<div class="bfff box1 ">
			<div class="center goods">
				<image :src="view.poster[0]" mode="aspectFill" class="logo-icon"></image>
				<div class="flex1">
					<div class="text1 fbold nowrap mb40">{{view.name}}</div>
					<!-- <div class="f24 text2">¥78 / 3个月会员 </div> -->
					<div class="space-between">
						<div class="ctheme"><span class="fbold text3">{{view.price}}</span>积分</div>
						<div class="f24 c999">{{view.type=='recharge'?'账号直冲':'卡密方式'}}</div>
					</div>
				</div>
			</div>
			<div class="nosupported flex-start">
				<image src="../../static/shouye/ban.png" mode="aspectFill" class="ban-icon mr20"></image>
				<div class="f24">不支持退款</div>
			</div>
		</div>
		<div class="profile bfff">
			<div class="center mb20">
				<div class="f32 fbold flex1">品牌简介</div>
				<!-- <div class="f24 c999 mr10">展开</div> -->
				<!-- <div class="mt10">
					<u-icon name="arrow-down" color="#A0A0A0" size="16"></u-icon>
				</div> -->
			</div>
			<rich-text class="f22 content mt20" :nodes="view.brandAbstract"></rich-text>
		</div>
		<div class="detail bfff">
			<div class="f32 fbold mb20">购买须知</div>
			<rich-text class="f22" :nodes="view.buyNotice"></rich-text>
			<!-- <div class="f22">兰博基尼（Automobili Lamborghini S.p.A.）2023款</div>
			<image src="../../static/shouye/nav3.png" mode="widthFix" class="cover"></image> -->
		</div>
		<div class="bottom-box posf">
			<div class="check-box flex-start">
				<div class="ml40 mr10" @click="setCheck">
					<u-icon color="#999" size="20" name="checkmark-circle" v-if="check==false"></u-icon>
					<u-icon color="#FF5555" size="20" name="checkmark-circle-fill" v-else></u-icon>
				</div>
				<div>下单即代表您同意<span class="ctheme">《用户购票协议》</span></div>
			</div>
			<div class="bfff exchange space-between">
				<div class="ctheme ml40"><span class="fbold text4">{{view.price}}</span>积分</div>
				<div class="cfff center exchange-btn mr40" @click="open()">兑换</div>
			</div>
		</div>
		<u-popup :safeAreaInsetBottom="false" :show="show" mode="bottom" bgColor="transparent">
			<duiHuan :detail='view' @close='close' :showDetail='false'></duiHuan>
		</u-popup>
	</view>
</template>

<script>
	import duiHuan from '/components/duiHuan'
	export default {
		data() {
			return {
				id: '',
				view: {
					poster:[]
				},
				show: false,
				check: false
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getaudiovisualview()
		},
		components: {
			duiHuan
		},
		methods: {
			setCheck() {
				this.check = !this.check
			},
			getaudiovisualview() {
				this.$http('/api/audiovisual/view', {
					id: this.id,
				}).then((r) => {
					r.data.poster =r.data.poster.split(',')
					this.view = r.data
				})
			},
			open() {
				if (!uni.getStorageSync('uInfo')) {
					uni.navigateTo({
						url: '/pages/dengLu/dengLu'
					})
					return
				}
				if (this.check) {
					
					this.show = true
				} else {
					uni.showToast({
						title: '请先勾选《用户购票协议》',
						icon: 'none'
					})
				}

			},
			close() {
				this.show = false
			},
			// 去分享
			goshare() {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline'],
					complete: (r) => {
						console.log(r)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 750rpx;
		top: 0;
		left: 0;

		.share-icon {
			width: 40rpx;
			height: 32rpx;

		}
	}

	.bottom-box {
		width: 100%;
		left: 0;
		bottom: 0;

		.check-box {
			width: 100%;
			height: 56rpx;
			background: #FCE6C6;

			.check-icon {
				width: 30rpx;
				height: 30rpx;
				border: 1rpx solid #716F6D;
				border-radius: 50%;
				margin-left: 35rpx;
			}
		}

		.exchange {
			width: 100%;
			height: 123rpx;
			border-top: 1rpx solid #A2A2A2;

			.text4 {
				font-size: 53rpx;
			}

			.exchange-btn {
				background: linear-gradient(to right, #FF5623, #FF8900);
				height: 60rpx;
				width: 200rpx;
				border-radius: 45rpx;
			}
		}
	}

	.detail {
		width: 715rpx;
		margin: 0 20rpx 25rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #F2F3F4;
		border-radius: 13rpx;
		padding: 20rpx 15rpx 25rpx;

		.cover {
			margin: 25rpx auto 0;
			width: 678rpx;
			height: 516rpx;
		}
	}

	.profile {
		width: 715rpx;
		margin: 25rpx 20rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #F2F3F4;
		border-radius: 13rpx;
		padding: 20rpx 25rpx 30rpx;

		.content {
			line-height: 32rpx;
		}
	}

	.box1 {
		width: 100%;
		padding: 30rpx 35rpx;
		border-radius: 0 0 15rpx 15rpx;

		.logo-icon {
			width: 200rpx;
			height: 200rpx;
			margin-right: 60rpx;
			border: 1rpx solid #B4B4B4;
			border-radius: 15rpx;
		}

		.text1 {
			font-size: 38rpx;
		}

		.text2 {
			margin: 40rpx 0 45rpx;
		}

		.text3 {
			font-size: 53rpx;
		}

		.goods {
			padding-bottom: 35rpx;
			border-bottom: 1rpx dashed #D9D9D9;
			margin-bottom: 25rpx;
		}

		.ban-icon {
			width: 28rpx;
			height: 28rpx;
		}
	}
</style>